//jsx给组件提供视图模板
// let box = (
//     <div>
//         <h1>hello world</h1>
//     </div>
// );
// //A必须大写，表示组件，小写a表示函数
// function DemoA() {
//     return box
//     //组件返回jsx元素
// };
// --------------------------------------------
// jsx元素是可选的，写组件时，可以使用它，如下：
// jsx，翻译成React.createElement写法

// import React from "react";

// function DemoA() {
//     return React.createElement(
//         'div',
//         {},
//         [
//             React.createElement('h1', { key: 1 }, ['hello world'])
//         ]
//     )
// }

// -----------------------------------------------------
// 在jsx元素中，你要嵌套表达式，必须使用{ } 包起来, 任何有值的内容都是表达式

// import React from "react";
// let a = 10;
// function foo(uesr) {
//     return '${user.firstName}${user.lastName}'
// }
// function DemoA() {
//     return (
//         <div>
//             <h2>{a+1} </h2>
//             <h2>{'${a}+1'} </h2>
//             <h2>{foo({firatName:'wang',lastName:'fu'})} </h2>
//         </div>
//     )
// }
// export default DemoA
//没生效
// -----------------------------------------------------
// jsx也可以做了函数的入参，也就是在调用一个函数时，传递传递一个jsx元素，也可以做为函数的返回值，还可以用在if或for中

// import React from "react";

// function foo(arg) {
//     if (arg) {
//         return <div>{ arg}</div>
//     } else {
//         return <div>我是随便数</div>
//     }
// }
// let ele = <strong>我是小strong</strong>

// function DemoA() {
//     return (
//         <div>
//             <h2>{foo(10)} </h2>
//             {/* //10 */}
//             <h2>{foo()} </h2>
//             {/* 我是随便数 */}
//             <h2>{foo('hello')} </h2>
//             {/* hello */}
//             <h2>{foo(<span>我是spanbiaoqian </span>)} </h2>
//             {/* 我是spanbiaoqian */}
//             <h2>{foo(ele)} </h2>
//             {/* 我是小strong */}

//         </div>
//     )
// }
// export default DemoA;

// jsx元素中有三个变化的属性：
// class 变成了 className
// for 变成了 htmlFor
// tabindex 变成了tabIndex


// -----------------------------------------------------

// import React from "react";
// let a = 'box1'

// function DemoA() {
//     return (
//         <div>
//             {/* <div className="box"></div> */}
//             {/* <div className={a} ></div> */}
//             <div className={'${a} ${b}'} ></div>
//             <div className={'${a} box100  ${b}'} ></div>
//         </div>
//     )
// }

// -----------------------------------------------------

// import React from "react";
// const ML = {
//     //Button 是一个组件
//     Button() {
//         return (<button>点击 </button>)
//     },
//     Form() {
//         return (
//             <div> Form </div>
//         )
//     }
// }

// function DemoA() {
//     return (
//         <div>
//             <ML.Button></ML.Button>
//             <ML.Form></ML.Form>
//         </div>
//     )
// }


// -----------------------------------------------------

// import React from "react";

// function Child(props) {
//     console.log(props);
//     return (
//         <div>

//         </div>
//     )
// }

// function DemoA() {
//     return (
//         <div>
//             {/* <Child>你好</Child>
//             <Child>{ true}</Child>
//             <Child> hello  </Child> */}
//             {/* <Child><div>hello one </div> </Child>
//             <Child><div>  hello div</div><span> hello span</span> </Child>
//             <Child><div><div>  hello div</div><span> hello span</span> </div> </Child> */}
//             {/* <Child>{()=>{return 10}} </Child>
//             <Child>{() => { return (<div>hello one </div>) }} </Child> */}
//             <Child>{() =>  (<div>hello one </div>)} </Child>
//         </div>
//     )
// }
// export default DemoA;
